<template>
  <div class="ztree" :id="ztreeId"></div>
</template>

<script>
import "/@/components/jquery/jquery-1.8.3";
import "@ztree/ztree_v3/js/jquery.ztree.all.min";
import "@ztree/ztree_v3/css/metroStyle/metroStyle.css";

import * as jquery from "jquery";
let $ = jquery;
if (window.jQuery) {
  $ = window.jQuery;
}else{
  window.jQuery = $;
}

let events = ["created", "asyncError", "asyncSuccess", "check", "click", "collapse", "dblClick", "drag", "dragMove", "drop", "expand", "mouseDown", "mouseUp", "remove", "rename", "rightClick"];
export default {
  props: {
    setting: {
      type: Object,
      require: false,
      default() {
        return {};
      }
    },
    code: {
      type: String,
      require: false,
      default: '',
    },
    nodes: {
      type: Array,
      require: true,
      default() {
        return [];
      }
    },
    checkbox: Boolean,
    radio: Boolean,
    beforeAsync: Function,
    beforeCheck: Function,
    beforeClick: Function,
    beforeCollapse: Function,
    befreoDblClick: Function,
    beforeDrag: Function,
    beforeDrapOpen: Function,
    beforeDrop: Function,
    beforeEditName: Function,
    beforeExpand: Function,
    beforeMouseDown: Function,
    beforeMouseUp: Function,
    beforeRemove: Function,
    beforeRename: Function,
    beforeRightClick: Function
  },
  emits: events,
  setup(props, { emit }) {
    let callback = {};
    events.forEach(e => {
      let name = "on" + e.charAt(0).toUpperCase() + e.slice(1);
      callback[name] = (...arg) => emit(e, ...arg);
      Object.keys(props).forEach(key => {
        if (key.indexOf("before") === 0) {
          callback[key] = props[key];
        }
      });
    });
    let ztreeSetting = {
      view: {
        showIcon: true // default to hide icon
      },
      callback: callback
    };
    if (props.checkbox) {
      ztreeSetting.check = {
        enable: true,
        chkStyle: "checkbox"
      };
    } else if (props.radio) {
      ztreeSetting.check = {
        enable: true,
        chkStyle: "radio"
      };
    }
    return {
      ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
      ztreeObj: null,
      list: [],
      ztreeSetting
    };
  },
  watch: {
    nodes: {
      handler(nodes) {
        //console.info("ztree watch.nodes........", nodes)
        if (this.code || this.url) return;
        this.list = nodes;
        if (this.ztreeObj) this.ztreeObj.destroy();
        this.$nextTick(() => {
          let lastConfig = Object.assign({}, this.ztreeSetting, this.setting);
          if (nodes) {
            this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId), lastConfig, this.list);
          } else {
            this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId), lastConfig);
          }
        });
      },
      deep: true,
      immediate: true
    },
    code: {
      handler() {
        this.reload()
      },
      immediate: false
    }
  },
  unmounted() {
    if (this.ztreeObj) this.ztreeObj.destroy();
  },
  mounted() {
    //console.info("ztree mounted")
    //this.reload();
  },
  methods: {
    getCheckedNodes() {
      return this.ztreeObj.getCheckedNodes(true);
    },
    reload(value) {
      //console.info("ztree reload ......", value, this.url, this.code)
      let lastConfig = Object.assign({}, this.ztreeSetting, this.setting);
      let key = this.code
      if (key != "") {
        if (!/^[\u4e00-\u9fa5]+$/i.test(key)) {
          return false;
        } else {
          key = encodeURI(key);
          lastConfig.async.otherParam = ["areaName", key];
          this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId), lastConfig);
          setTimeout(() => {
            this.ztreeObj.expandAll(true);
          }, 300);
        }
      } else {
        //搜索参数为空时必须将参数数组设为空
        lastConfig.async.otherParam = [];
        if (this.ztreeObj) this.ztreeObj.destroy();
        this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId), lastConfig);
      }
    },
    // 自定义重新加载树的方法
    doSearch(obj) {
      console.log("doSearch--", obj);
      if (this.ztreeObj) {
        this.ztreeObj.destroy();
      }
      this.$nextTick(() => {
        let lastConfig = Object.assign({}, this.ztreeSetting, this.setting);

        lastConfig.async.otherParam = {"areaName": obj.name, 'lxdh': obj.tel};
        this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId), lastConfig);
        setTimeout(() => {
          this.ztreeObj.expandAll(true);
        }, 300);

      });
    }
  }
};
</script>
